<template>
    <div style="border:1px solid" width='500px' height='500px'>
        <!-- <video class="video" width="500px" height="500px">
            <source type="application/x-mpegURL" src="https://logos-channel.scaleengine.net/logos-channel/live/biblescreen-ad-free/playlist.m3u8">
        </video> -->
        <!-- <video class="video" controls src="https://logos-channel.scaleengine.net/logos-channel/live/biblescreen-ad-free/playlist.m3u8" type="application/x-mpegURL"></video> -->
        <!-- <video class="video" controls></video> -->
        <canvas id="c1" width="200px" height="200px"></canvas>
        <canvas id="c2" width="200px" height="200px"></canvas>
        <video type="application/x-mpegURL" controls></video>
    </div>
</template>
<script>
export default {
    created() {

    },
    mounted() {
        let video = document.querySelector('video')
        // let video = document.createElement('video')
        // let canvas = document.querySelector('canvas')
        // let ctx = canvas.getContext('2d')
        let c1 = document.querySelector('#c1')
        let c2 = document.querySelector('#c2')
        let ctx1 = c1.getContext('2d')
        let ctx2 = c2.getContext('2d')
        console.log('c1', c1)
        ctx2.fillRect(0, 0, 200, 200)
        ctx2.fillStyle = 'yellow'

        console.log(video)
        video.src = 'https://logos-channel.scaleengine.net/logos-channel/live/biblescreen-ad-free/playlist.m3u8'
        // video.type = 'application/x-mpegURL'
        console.log(video)
        window.addEventListener('touchstart', () => {
            video.load()
            video.play()
            setInterval(() => {
                ctx1.drawImage(video, 0, 0)
            }, 20)
        })


    }
}
</script>
